<template>
  <a-card title="企业会员" style="width: 300px">
    <a-select ref="select" v-model:value="value1" style="width: 140px; margin-right: 10px" @focus="focus"
      @change="handleChange">
      <a-select-option value="不限会员状态">不限会员状态</a-select-option>
      <a-select-option value="已锁定">已锁定</a-select-option>
    </a-select>
    <a-select ref="select" v-model:value="value2" style="width: 140px; margin-right: 10px" @focus="focus"
      @change="handleChange">
      <a-select-option value="按注册时间排序">按注册时间排序</a-select-option>
      <a-select-option value="按登录时间排序">按登录时间排序</a-select-option>
    </a-select>
    <a-select ref="select" v-model:value="value3" style="width: 140px; margin-right: 10px" @focus="focus"
      @change="handleChange">
      <a-select-option value="不限注册时间">不限注册时间</a-select-option>
      <a-select-option value="3天内">3天内</a-select-option>
      <a-select-option value="7天内">7天内</a-select-option>
      <a-select-option value="15天内">15天内</a-select-option>
      <a-select-option value="30天内">30天内</a-select-option>
    </a-select>
    <a-select ref="select" v-model:value="value4" style="width: 140px; margin-right: 10px" @focus="focus"
      @change="handleChange">
      <a-select-option value="不限注册来源">不限注册来源</a-select-option>
      <a-select-option value="APP">APP</a-select-option>
      <a-select-option value="手机浏览器">手机浏览器</a-select-option>
      <a-select-option value="微信浏览器">微信浏览器</a-select-option>
      <a-select-option value="微信小程序">微信小程序</a-select-option>
      <a-select-option value="抖音小程序">抖音小程序</a-select-option>
      <a-select-option value="电脑浏览器">电脑浏览器</a-select-option>
      <a-select-option value="系统">系统</a-select-option>
    </a-select>
    <a-select ref="select" v-model:value="value5" style="width: 140px; margin-right: 10px" @focus="focus"
      @change="handleChange">
      <a-select-option value="不限微信绑定">不限微信绑定</a-select-option>
      <a-select-option value="已绑定微信">已绑定微信</a-select-option>
      <a-select-option value="未绑定微信">未绑定微信</a-select-option>
    </a-select>
    <a-select ref="select" v-model:value="value6" style="width: 140px; margin-right: 10px" @focus="focus"
      @change="handleChange">
      <a-select-option value="不限邮箱绑定">不限邮箱绑定</a-select-option>
      <a-select-option value="已绑定邮箱">已绑定邮箱</a-select-option>
      <a-select-option value="未绑定邮箱">未绑定邮箱</a-select-option>
    </a-select>
    <a-input-search v-model:value="value" style="width: 200px; float: right" placeholder="请输入搜索内容" enter-button
      @search="onSearch" />
    <a-select ref="select" v-model:value="value7" style="width: 140px; float: right" @focus="focus"
      @change="handleChange">
      <a-select-option value="UID">UID</a-select-option>
      <a-select-option value="用户名">用户名</a-select-option>
      <a-select-option value="手机号">手机号</a-select-option>
      <a-select-option value="企业名称">企业名称</a-select-option>
    </a-select>
    <a-table :columns="columns" :data-source="Data" style="margin-top: 10px" :row-selection="rowSelection"
      :pagination="false" rowKey="_id">
      <template #tags="{ text: tags }">
        <span v-if="tags">
          <a-tag color="green">正常</a-tag>
        </span>
        <span v-else><a-tag color="red">已锁定</a-tag> </span>
      </template>
      <template #action="{ record }">
        <span>
          <a-button size="small" style="margin-right: 10px">管理</a-button>
          <a-button type="primary" size="small" style="margin-right: 10px" @click="as(record)">查看</a-button>
          <a-button type="primary" size="small" style="margin-right: 10px" @click="showModal(record)">修改</a-button>
          <a-popover placement="bottom" trigger="click">
            <template #content>
              <p><a-button type="link">日志</a-button></p>
              <p v-if="record.state == true"><a-button type="link" @click="jiesuo(record)"
                  v-model="record.state">锁定</a-button></p>
              <p v-else><a-button type="link" @change="jiesuo(record)" v-model="record.state">解锁</a-button></p>
              <p><a-button type="link">禁聊</a-button></p>
              <p>
                <a-popconfirm title="确定要删除这条数据吗？" ok-text="确定" cancel-text="取消" @confirm="deldata(record._id)"
                  @cancel="cancel">
                  <a-button type="link">删除</a-button>
                </a-popconfirm>
              </p>
            </template>
            <a-button size="small">...</a-button>
          </a-popover>
        </span>
      </template>
    </a-table>
    <div style="display: flex">
      <div>
        <a-button type="primary" style="margin-right: 10px; margin-top: 10px" @click="openadd">添加会员</a-button>
        <a-button type="primary" danger style="margin-right: 10px; margin-top: 10px">删除所选</a-button>
      </div>
      <div style="margin-top: 10px; margin-left: 200px">
        <a-pagination size="small" :total="total" :show-total="(total) => `共 ${total} 条`" show-quick-jumper
          show-size-changer v-model:current="current1" v-model:pageSize="pagesize"
          :pageSizeOptions="['1', '3', '5', '10']" />
      </div>
    </div>
  </a-card>
  <!-- 添加会员弹出框 -->
  <a-modal v-model:visible="visible2" title="添加会员" @ok="add" @cancel="resetForm">
    <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol" ref="formRef">
      <a-form-item label="用户名" style="width: 315px" ref="username" name="username">
        <a-input v-model:value="formState.username" />
      </a-form-item>
      <a-form-item label="手机号" style="width: 315px" ref="phone" name="phone">
        <a-input v-model:value="formState.phone" />
      </a-form-item>
      <a-form-item label="密码" style="margin-left: 15px; width: 300px" ref="pwd" name="pwd">
        <a-input v-model:value="formState.pwd" />
      </a-form-item>
    </a-form>
  </a-modal>
  <!-- 修改会员弹出框 -->
  <a-modal v-model:visible="visible" title="编辑会员" @ok="handleOk">
    <a-form :model="form2" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="用户名" style="width: 315px">
        <a-input v-model:value="form2.username" />
      </a-form-item>
      <a-form-item label="手机号" style="width: 315px">
        <a-input v-model:value="form2.phone" />
      </a-form-item>
      <a-form-item label="密码" style="margin-left: 15px; width: 300px">
        <a-input v-model:value="form2.password" />
      </a-form-item>
    </a-form>
  </a-modal>
  <!-- 查看 -->
  <a-modal v-model:visible="visible3" title="查看会员" :footer="null">
    <p style="margin-left: 67px">
      <span style="font-weight: 700">UID</span> {{ form3.UID }}
    </p>
    <p style="margin-left: 67px">
      <span style="font-weight: 700">身份</span> <span>企业会员</span>
    </p>
    <p style="margin-left: 54px">
      <span style="font-weight: 700">用户名</span> {{ form3.username }}
    </p>
    <p style="margin-left: 54px">
      <span style="font-weight: 700">手机号</span> {{ form3.phone }}
    </p>
    <p style="margin-left: 40px">
      <span style="font-weight: 700">注册时间</span> {{ form3.createTime }}
    </p>
    <p style="margin-left: 40px">
      <span style="font-weight: 700">最近登陆</span> {{ form3.recentlylogged }}
    </p>
    <a-button style="margin-left: 100px; margin-top: 10px" @click="visible3 = false">关闭</a-button>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "@vue/runtime-core";
import moment from "moment";
import { message } from "ant-design-vue";
import axios from "axios";
const formState = ref({
  username: "",
  phone: "",
  pwd: "",
});
const formRef = ref();
const form2 = ref({});
const form3 = ref({});

const columns = [
  {
    title: "UID",
    dataIndex: "index",
    key: "UID",
  },
  // {
  //   title: "企业名称",
  //   dataIndex: "name",
  //   key: "name",
  // },
  {
    title: "用户名",
    dataIndex: "username",
    key: "username",
  },
  {
    title: "手机号",
    dataIndex: "phone",
    key: "phone",
  },
  {
    title: "注册时间",
    dataIndex: "createTime",
    key: "createTime",
    customRender: (text: any, row: any, index: any) => {
      return moment(text.text).format("YYYY-MM-DD HH:mm");
    },
  },
  {
    title: "最近登陆",
    dataIndex: "recentlylogged",
    key: "recentlylogged",
    customRender: (text: any, row: any, index: any) => {
      return moment(text).format("YYYY-MM-DD HH:mm");
    },
  },
  {
    title: "会员状态",
    key: "state",
    dataIndex: "state",
    slots: { customRender: "tags" },
  },
  {
    title: "操作",
    key: "action",
    slots: { customRender: "action" },
  },
];
let Data = ref([]);
let value1 = ref("不限会员状态");
let value2 = ref("按注册时间排序");
let value3 = ref("不限注册时间");
let value4 = ref("不限注册来源");
let value5 = ref("不限微信绑定");
let value6 = ref("不限邮箱绑定");
let value7 = ref("用户名");
let value = ref("");
let total = ref(0);

const visible = ref<boolean>(false);
const visible2 = ref<boolean>(false);
const visible3 = ref<boolean>(false);
onMounted(() => {
  getdata();
});
// 获取数据
const getdata = async () => {
  let { data } = await axios.get("http://localhost:3461/api/user");
  console.log(data);

  data.data.forEach((item: any, ind: any) => {
    item["index"] = ind + 1;



  });
  Data.value = data.data;
};
// 删除数据
const deldata = async (id: any) => {
  let { data } = await axios.delete(`http://localhost:3461/api/user?id=${id}`);
  console.log(data);
  if (data.code == 201) {
    message.success("删除成功");
    getdata();
  }
};
// 取消删除
const cancel = (e: MouseEvent) => {
  message.error("Click on No");
};
const showModal = (item: any) => {
  form2.value = item;
  visible.value = true;
};
const openadd = () => {
  visible2.value = true;
};
const as = (item: any) => {
  visible3.value = true;
  form3.value = item;
};
// 修改
const handleOk = async () => {
  let res = await axios.put(`http://localhost:3461/api/user?id=${form2.value._id}`, form2.value);
  console.log(res);
  if (res.data.code == 200) {
    message.success("修改成功");
    visible.value = false;
    getdata();
  }
};
const jiesuo = async (item: any) => {
  let res = await axios.put(`http://localhost:3461/api/user2?_id=${item._id}`, item);
  // console.log(res);
  getdata();
}
const resetForm = () => {
  formRef.value.resetFields();
};
// 添加
const add = async (e: MouseEvent) => {
  let res = await axios.post("http://localhost:3461/api/user", formState.value);
  console.log(res);
  if (res.data.code == 200) {
    message.success("添加成功");
    formRef.value.resetFields();
    visible2.value = false;
    getdata();
  }
};
const focus = () => {
  console.log("focus");
};

const handleChange = (value: string) => {
  console.log(`selected ${value}`);
};
const rowSelection = {
  onChange: (selectedRowKeys: any, selectedRows: any) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
};
</script>

<style lang="scss" scoped>

</style>